<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变大变小</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}

	</style>
	<script type="text/javascript">
	window.onload = function  () {
		
		btn = document.getElementById('btn');
		box = document.getElementById('box');

		btn.onclick = function  () {
			if(btn.value=='开始'){

				time = setInterval(run, 10);

				btn.value='结束';
			}else{
				clearInterval(time);
				btn.value='开始';
			}
		}

		fangxiang = true;
		function run () {
			
			width = window.getComputedStyle ? window.getComputedStyle(box,null).width : box.currentStyle.width; 

			width = parseInt(width);



			if(width>400){

				fangxiang = false;
			}else if(width<200){
				fangxiang = true;
			}

			if(fangxiang){
				width+=5;
			}else{
				width-=5;
			}

			box.style.width=width+"px";
			box.style.height=width+"px";
		}

	}
	</script>

</head>
<body>
	<input id="btn" type="button" value="开始" >
	<div id="box" class="box"></div>
</body>
</html>